<template>
  <div>
    <div class="select-room"></div>
    请选择房间号：
    <el-select v-model="params.roomId" placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <div class="block">
      <span class="demonstration">请选择开始日期 </span>
      <el-date-picker
          v-model="params.beginDate"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
      </el-date-picker>
    </div>

    <div class="block">
      <span class="demonstration">请选择结束日期 </span>
      <el-date-picker
          v-model="params.endDate"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
      </el-date-picker>
    </div>

    <el-button type="primary" round @click="generate">生产报表</el-button>

  </div>
</template>

<script>
import {getRoomId} from "../../api/room_reserve";
import Vue from 'vue'


export default {
  name: "Reserve",
  data() {
    return {
      options: [],


      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

      params: {
        roomId: '',
        beginDate: '',
        endDate: ''
      }
    }
  },
  created() {
    this.getRooms();
  },
  methods: {
    getRooms(){
      getRoomId().then(res => {
        console.log();
        res.data.forEach((item,index) => {
          this.options.push({
            value: item.roomId,
            label: item.roomId
          })
        })
      })
    },
    generate() {
      let url = 'http://localhost:8082/reportForm/reserve?beginDate=' + this.params.beginDate +
          '&endDate=' + this.params.endDate +'&roomId=' + this.params.roomId;
      console.log(url)
      this.downloadFile(url);


      // reserveForm(this.params).then(res => {
      //
      // })
      console.log(this.params)
    },
    downloadFile(url) {
      return new Promise((resolve, reject) => {
        Vue.prototype.axios.get(url, {responseType: 'blob'}).then(resp => {
          let headers = resp.headers
          if (headers['content-type'].indexOf('json') !== -1) {
            let fr = new window.FileReader()
            if (resp.data.error) {
              // myMessage.error(resp.data.error)
            }
            fr.onload = (event) => {
              let data = JSON.parse(event.target.result)
              if (data.msg) {
                // myMessage.info(data.msg)
              } else {
                // myMessage.error('Invalid file format')
              }
            }
            let b = new window.Blob([resp.data], {type: 'application/json'})
            fr.readAsText(b)
            return
          }
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(new window.Blob([resp.data], {type: headers['content-type']}))
          link.download = (headers['content-disposition'] || '').split('filename=')[1]
          document.body.appendChild(link)
          link.click()
          link.remove()
          // myMessage.success("Downloading...")
          resolve()
        }).catch((error) => {
          reject(error)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>